<template>
  <div class="app-container" margin:0px auto>
    <div class="background">
      <div class="form-container">
        <h2 align = "center">北京科技大学顺德研究生院出入校审批</h2>
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">

          <el-form-item label="学号" prop="requestStudentId">
            <el-input
              v-model="form.requestStudentId"
              placeholder="请输入学号，首字母大写"/>
          </el-form-item>

          <el-form-item label="姓名" prop="requestStudentName">
            <el-input
              v-model="form.requestStudentName"
              placeholder="请输入姓名"/>
          </el-form-item>

          <el-form-item label="开始时间" prop="requestStartTime">
            <el-date-picker
              v-model="form.requestStartTime"
              value-format="yyyy-MM-dd hh:mm:ss"
              type="datetime"
              placeholder="选择日期时间"/>
          </el-form-item>

          <el-form-item label="结束时间" prop="requestEndTime">
            <el-date-picker
              v-model="form.requestEndTime"
              value-format="yyyy-MM-dd hh:mm:ss"
              type="datetime"
              placeholder="选择日期时间"/>
          </el-form-item>

          <el-form-item label="外出地点" prop="requestRoughAddress">
            <div id="app1">
              <el-cascader
                :options="options"
                v-model="selectedOptions"
                size="large"
                @change="handleChange"/>
            </div>
          </el-form-item>

          <el-form-item label="外出详细地点" prop="requestDetailedAddress">
            <el-input
              v-model="form.requestDetailedAddress"
              placeholder="请输入详细地点，例如同江医院"/>
          </el-form-item>

          <el-form-item label="外出事由" prop="requestReason">
            <el-input
              v-model="form.requestReason"
              placeholder="请输入外出事由，例如看病"/>
          </el-form-item>

          <el-form-item :label="'个 人 照 片 上 传 \n (大小不能超过 2MB)'" prop="requestStudentImageId">
            <el-upload
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
              :limit="1"
              class="avatar-uploader"
              action="">
              <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </el-form-item>

          <el-form-item :label="'行 程 码 照 片 上 传 \n (大小不能超过 2MB)'" prop="requestTravelImageId">
            <el-upload
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
              :limit="1"
              class="avatar-uploader"
              action="">
              <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即申请</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import { regionData, CodeToText } from 'element-china-area-data'
import approval from '@/api/approval'
export default {
  data() {
    return {
      form: {
        requestStudentId: '',
        requestStudentName: '',
        requestStartTime: '',
        requestEndTime: '',
        requestRoughAddress: '',
        requestDetailedAddress: '',
        requestReason: '',
        requestStudentImageId: '',
        requestTravelImageId: ''
      },
      // 3.省市区不带‘全部’三级联动选择
      options: regionData,
      selectedOptions: [],
      imageUrl1: '',
      imageUrl2: '',
      // 校验规则
      rules: {
        requestStudentId: [{
          required: true,
          message: '请输入学号',
          trigger: ['blur', 'change']
        }],
        requestStudentName: [{
          required: true,
          message: '请输入姓名',
          trigger: ['blur', 'change']
        }],
        // requestRoughAddress: [{
        //   required: true,
        //   message: '请输入外出地址',
        //   trigger: ['blur', 'change']
        // }],
        requestDetailedAddress: [{
          required: true,
          message: '请输入外出详细地址',
          trigger: ['blur', 'change']
        }],
        requestReason: [{
          required: true,
          message: '请输入外出事由',
          trigger: ['blur', 'change']
        }],
        // requestStudentImageId: [{
        //   required: true,
        //   message: '请上传个人照片',
        //   trigger: ['blur', 'change']
        // }],
        // requestTravelImageId: [{
        //   required: true,
        //   message: '请上传行程码照片',
        //   trigger: ['blur', 'change']
        // }],
        requestStartTime: [{
          required: true,
          message: '请选择开始时间',
          trigger: ['blur', 'change']
        }],
        requestEndTime: [{
          required: true,
          message: '请选择结束时间',
          trigger: ['blur', 'change']
        }]
      }
      // 时间差校验
      // 外出地址判断
    }
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          approval.createRequest(this.form)
            .then(response => {
              // 提示
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
            })
            .catch((error) => {
              console.log(error)
            })
        } else {
          this.$message.error('请完善表单相关信息！')
          return false
        }
      })
      console.log('submit!')
    },

    handleChange() {
      var loc = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]]
      }
      this.form.requestRoughAddress = loc
      console.log(loc)// 打印区域码所对应的属性值即中文地址
    },

    handleAvatarSuccess(res, file) {
      if (res.code === 200) {
        this.imageUrl1 = res.data.imageDataUrl
      } else {
        this.$message.error(`图片上传失败:${res.message}`)
      }
    },

    // 对上传图片的大小、格式进行限制
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isJPG2 = file.type === 'image/jpg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isJPG2 && !isPNG) {
        this.$message.error('只支持jpg或png格式图片!')
        return
      }
      if (!isLt2M) {
        this.$message.error('请上传2MB以内的图片!')
        return
      }
      const fileData = new FormData()
      fileData.append('file', file)
      // upload为上传的接口
      approval.uploadStudentImage(fileData)
        .then(res => {
          console.log(res)
          this.imageUrl1 = res.data.imageDataUrl
          this.form.requestStudentImageId = res.data.imageId
          // 对返回的图片地址进行回显
          // this.$set(this.form, 'file', this.imgUrl)
        })
    }
  }
}
</script>

<style >
  .app-container{
    width: 100%;
    height: 100%;
  }

  .form-container{
    width:80%;
    height:95%;
    background-color: rgba(255, 255, 255, 0.7);
    /* align-self: center; */
    /* align-items: center;
    justify-content: center; */
    position: absolute;
    left: 10%;
    /* border: #000000 2px solid; */
    padding-left: 3%;
    padding-right: 3%;
  }

    .avatar-uploader .el-upload {
        border: 2px dashed #000000;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-form-item label:after {
        content: "";
        display: inline-block;
        width: 100%;
    }
    .el-form-item__label {
        text-align: justify;
        height: 50px;
        font-weight: 800;
        font-size: 15px;
        color: #000000;
    }
    .el-form-item.is-required .el-form-item__label:before {
        content: none !important;
    }
    .el-form-item__label{
        white-space:pre-line;
    }
    ::v-deep.el-form-item__label{
        white-space:pre-line;
    }
</style>
